<template>
	<div class="fixed top-0 bottom-0 left-0 right-0">
		<el-tabs
			v-model="activeTab"
			:stretch="true"
			@tab-change="onTabChange"
			class="flex flex-col big-tabs"
		>
			<el-tab-pane label="总体情况" name="Report" lazy>
				<Report :dataPool="dataPool" />
			</el-tab-pane>
			<el-tab-pane label="返乡" name="FanXiang" lazy>
				<FanXiang :dataPool="dataPool" />
			</el-tab-pane>
			<el-tab-pane label="开通" name="KaiTong" lazy>
				<KaiTong :dataPool="dataPool" />
			</el-tab-pane>
			<el-tab-pane label="投诉" name="TouSu" lazy>
				<TouSu :dataPool="dataPool" />
			</el-tab-pane>
			<el-tab-pane label="智家业务" name="XinYeWu" lazy>
				<XinYeWu :dataPool="dataPool" />
			</el-tab-pane>
			<el-tab-pane label="分布数据" name="FenBu" lazy>
				<FenBu :dataPool="dataPool" />
			</el-tab-pane>
			<el-tab-pane label="业务支撑情况" name="ZongTi" lazy>
				<ZongTi :dataPool="dataPool" />
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<script setup>
import { ref, onMounted, nextTick, reactive } from 'vue';
import ZongTi from '../components/home/ZongTi.vue';
import FanXiang from '../components/home/FanXiang.vue';
import KaiTong from '../components/home/KaiTong.vue';
import XinYeWu from '../components/home/XinYeWu.vue';
import TouSu from '../components/home/TouSu.vue';
import FenBu from '../components/home/FenBu.vue';
import Report from '../components/home/Report.vue';
import { nlData } from '@/components/options/FanXiang/nlData';
import fetchData from './fetchData';

import { ElLoading } from 'element-plus';

const activeTab = ref('');

window.isMobile = window.innerWidth < 768;
window.dataPool = {};

const dataPool = ref({
	dataPool1: {},
	dataPool2: {},
});

window.allCharts = window.allCharts || {
	ZongTi: {},
	FanXiang: {},
	KaiTong: {},
	XinYeWu: {},
	TouSu: {},
	FenBu: {},
};
const allCharts = window.allCharts;

const onTabChange = async (v) => {
	const charts = allCharts[v];
	await nextTick();
	if (v !== 'Report') {
		Object.keys(charts).forEach((key) => {
			charts[key].resize();
		});
	}
};

onMounted(async () => {
	if (!window.dataPool.dataPool1) {
		const loading = ElLoading.service({
			lock: true,
			text: '加载中',
			background: 'rgba(0, 0, 0, 0.7)',
		});
		const _dataPool = await fetchData();
		window.dataPool = _dataPool;

		dataPool.value = { ..._dataPool };

		const { dataPool1, dataPool2 } = window.dataPool;
		Object.keys(NLObj.collections).forEach((key) => {
			let collection = NLObj.collections[key];
			if (!dataPool2[collection.name]) {
				if (collection.name.endsWith('kuandai'))
					dataPool2[collection.name] = nlData(
						'kuandai',
						dataPool1,
						dataPool2,
						collection
					);
				if (collection.name.endsWith('tousu'))
					dataPool2[collection.name] = nlData(
						'tousu',
						dataPool1,
						dataPool2,
						collection
					);
			}
		});

		activeTab.value = 'Report';
		loading.close();
	} else {
		activeTab.value = 'Report';
	}
});
</script>
<style>
.el-tabs__header {
	padding: 10px 20px 0;
}

.big-tabs .el-tabs__content {
	flex: 1;
}

.big-tabs,
.big-tabs .el-tab-pane {
	height: 100%;
}
</style>
